<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!--<meta http-equiv="Pragma" content="no-cache">-->
<!--<meta http-equiv="Cache-Control" content="no-cache">-->
<!--<meta http-equiv="Expires" content="0">-->
<meta name="viewport" content="target-densitydpi=device-dpi,width=1080,user-scalable=0"/>
	<title>幸运大转盘</title>
	<!-- 公共代码 -->
	<script type="text/javascript" src="/Public/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="/Public/mobile/js/public.js"></script>

	<!-- 公共代码 -->
	<link rel="stylesheet" type="text/css" href="/Public/mobile/css/public.css">
	<link rel="stylesheet" type="text/css" href="/Public/mobile/css/style.css">
	<link rel="stylesheet" type="text/css" href="/Public/mobile/css/zhuanpan.css">
	<link rel="stylesheet" type="text/css" href="/Public/mobile/css/public/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/Public/mobile/css/public/mobiscroll.custom-2.16.1.min.css">
	<!-- 滚动条 begin -->
	<script type="text/javascript" src="/Public/js/scoll/mousewheel.js"></script>
	<script type="text/javascript" src="/Public/js/scoll/easyscroll.js"></script>
	<script type="text/javascript" src="/Public/js/jQueryRotate.2.2.js"></script>
	<script type="text/javascript" src="/Public/js/jquery.easing.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/Public/css/scoll/scoll.css">
	<!-- 滚动条 end -->

	<style>
		.turntable{width:810px; height:810px; position:relative; margin:50px auto;}
		#disk{width:810px; height:810px;
			background-image:url(/Public/images/bg_bz1.png);
			background-repeat:no-repeat;}
		#start{ width:810px;
				height:810px;
			 	position:absolute;
			  	top:0;
			    left:0px;
			    z-index:999;
}
		#rotate{width:810px;
			height:810px;
			position:absolute;
			top:0;
			left:0px;
			z-index:888;
		}
		#rotate img{cursor:pointer;width:810px;height:460810;}

		#start img{cursor:pointer}
		.color_blue{color:#00199a;}
	</style>
	<link rel="stylesheet" type="text/css" href="/Public/mobile/css/news.css">
</head>
<body>
	<div class="wrap wrap2">
		<include file="./Application/Home/View/mobile/header.html" />
		<!--登录页面  -->
		<div class="enter_in">
			<a href="index.php" onclick="history.go(-1)" class="back">
				<img src="/Public/mobile/images/back.png" alt="">
				<span>返回</span>
			</a>
			<div class="txt txt_rule">
				<h3 class="txt_h3 txt_h4">———— 幸运转盘 ————</h3>

				<!--大转盘部分-->
				<div class="turntable" id="1">
			        <div id="disk"></div>
					<div id="start"><img src="/Public/images/start.png" id="startbtn"></div>
					<div id="rotate"><img src="/Public/images/rotate.png" id="rotatebtn"></div>
			    </div>

				<!---活动规则部分-->
				<div>
					<h4 class="txt_h3 txt_h4" style="font-size:44px;height: 100px;margin-top:4%;margin-bottom:2%;">———— 活动规则 ————</h4>
					<ol style="margin:0px 120px;font-size:40px;">
						<li>1、每次发起“<span class="color_blue">点击抽奖</span>”或“<span class="color_blue">再转一次</span>”均默认扣减20积分参与抽奖。<li>
						<li>2、点击“<span class="color_blue">刷新惊喜</span>”可查看更多礼品</li>
						<li>3、每天参与次数不限，多次参与中奖几率更大哦。</li>
					</ol>
				</div>
			</div>
		</div>
	<!--登录页面  -->
	</div>
	<include file="./Application/Home/View/mobile/common.html" />

	<!--抽奖提示框-->
	<div class="enters" id="enter8">
		<div class="enter_in">
			<span class="delete"></span>
				<div class="txt txt4">
					<p class="tip_msg">
						很可惜<br>
						Try Again !
					</p>
					<input type="button" onclick="rePlay()" class="replay_input" />
					<input type="button" onclick="changProduct()" class="refer_input" />
				</div>
			</div>

		</div>
	</div>

	<!--积分不足-->
	<div class="enters" id="enter10">
		<div class="enter_in">
			<span class="delete"></span>
				<div class="txt txt4">
					<p id="showLottoText">
						积分不够<br>
						攒足再来吧 !
					</p>
					<input type="button" onclick="history.go(-1)" class="return_input" />
				</div>
			</div>

		</div>
	</div>

	<!--网络异常弹框-->
	<div class="enters" id="enter9">
		<div class="enter_in">
				<div class="txt txt4">
					<p>网络异常<br/>
					请再试一遍
					</p>
					<img src="/Public/mobile/images/yes.png" alt="" />
				</div>
			</div>
		</div>
	</div>
	<!--网络异常弹框end-->

	<!--切换成功  -->
	<div class="enter" id="enter16">
		<div class="enter_in">
				<div class="txt txt4">
					<p>刷新成功</p>
					<img src="/Public/mobile/images/yes.png" alt="" />
				</div>
			</div>

		</div>
	</div>
	<!--切换成功  -->

</body>
</html>
<script type="text/javascript" src="/Public/js/mobiscroll.custom-2.16.1.min.js"></script>
<script type="text/javascript">
	function rePlay(){   //再玩一遍
		$("#rotatebtn").rotate({
			duration:100, //转动时间
			angle: 0,
			animateTo:0, //转动角度
			easing: $.easing.easeOutSine,
			callback: function(){
			}});
		$('#enter8').fadeOut(200);
		lottery();
	};

	function changProduct(){  //刷新惊喜
		$("#rotatebtn").rotate({
			duration:100, //转动时间
			angle: 0,
			animateTo:0, //转动角度
			easing: $.easing.easeOutSine,
			callback: function(){
		}});
		var arr=[  //刷新惊喜更换奖品
		"url(/Public/images/bg_bz1.png)",
		"url(/Public/images/bg_bz2.png)",
		"url(/Public/images/bg_bz3.png)",
		];
		$('#enter8').fadeOut(200);
		var typeId=parseInt($('.turntable').attr('id'));
		if(typeId==3){
			$('.turntable').attr('id',1);
			$('#disk').css("background-image",arr[0]);
			$('#enter16').fadeIn(800).delay(2000).fadeOut();
		}else{
			$('.turntable').attr('id',typeId+1);
			$('#disk').css("background-image",arr[typeId]);
			$('#enter16').fadeIn(800).delay(2000).fadeOut();
		}
     $("#enter8").hide();
	};

	$(function(){  //点击按钮开始抽奖
		$("#start").click(function(){
			lottery();
		});
	});

	/**
	 *@param typeId  奖品类型，1、第一组奖品，2、第二组奖品，3、第三组奖品
	 */
	function lottery(){   //抽奖请求后台随机角度和奖项
		var typeId=parseInt($('.turntable').attr('id'));
		$("#start").unbind('click');
		$.ajax({
			type: "GET",
			url: "index.php?m=Home&c=Lotto&a=Do_lotto_options",
			dataType: "json",
			data:{'group':typeId},   //给后台提交当前积分和转盘奖品类型
			cache: false,
			success:function(json){
				$("#startbtn").unbind('click').css("cursor","default");
				var a = json.angle; //角度
				var p = json.PNAME; //奖项
				var status = json.status; //奖项
				var score = json.score; //积分
				var str = "";   //中奖提示语字符串
				if(status==500){
					$("#showLottoText").text("");
					$("#showLottoText").text(json.msg);
					$("#enter10").show();   //提示框
					$("#start").bind('click',lottery);
					return;
				}
				$("#rotatebtn").rotate({
					duration:4000, //转动时间
					angle: 0,
					animateTo:-1800-a, //转动角度
					easing: $.easing.easeOutSine,
					callback: function(){
						if(status==200)
						{
							str="中奖啦！<br>"+p+"就是你的了!";
							$("#score").html("(积分"+score+")");
							$("#enter8").show();
							$('.tip_msg').html(str);
							$("#start").bind('click',lottery);
						}else{
							str="很可惜<br/>Try Again !";
							$("#score").html("(积分"+score+")");
							$("#enter8").show();
							$('.tip_msg').html(str);
							$("#start").bind('click',lottery);
						}

					}
				});

			},
			error: function(XMLHttpRequest, textStatus, errorThrown){
				$('#enter9').fadeIn(800).delay(1000).fadeOut();
				$("#start").bind('click',lottery);
				return false;
			},
		});
	}


	var instance = mobiscroll.select('#demo', {
	    theme: 'mobiscroll',
	    lang: 'zh',
	    display: 'top',
	    minWidth: 200
	});
</script>